<template>
  <div>
    <!-- <img src="@/assets/img/my/extension.png" mode="" style="max-width: 90%; margin-left: 0.4rem;" > -->
    <img @click="tuijian" src="@/assets/img/my/tuijian.png" mode="" style="max-width: 90%; margin-left: 0.4rem;" >
    <div class="bigDivCss" v-for="(val, index) in catalogData" :key="index" @click="funcClick(val)" >
      <div class="flexCenter" style="margin-left: 0.2rem;" >
        <img :src="val.img" mode="" >
        <span>{{val.name}}</span>
        <badge :text="identityData.parentApprovalCount" v-if="val.id == 1 && identityData.parentApprovalCount > 0" ></badge>
      </div>
      <div v-if="val.name == '我的学科'" class="subject-p">{{identityData.stageSubjectName}}</div>
      <div style="margin-right: 0.2rem;" >
        <img src="@/assets/img/my/arrow.png" mode="" style="width: 0.13rem; height: 0.2rem;" >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Badge } from 'vux'
import { parentDirectoryApi, teacherDirectoryApi } from '@/api/myNewApi'

export default {
  components: {
    Badge
  },
  props: {
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId
    }),
    identityData () {
        return this.$store.state.myInfo.identityData
    }
  },
   watch: {
    identityData(){
       if (this.identityData.canSwitchIdentity) {
          this.catalogData.push({id: 2, name: '切换身份', img: require('@/assets/img/my/switch.png'), url: '/signUp/choice' })
        }
    }
  },
  data () {
    return {
    
      catalogData: [
        {id: 1, name: '家长审核', img: require('@/assets/img/my/toExamine.png'), url:'myClass' },
        {id: 3, name: '我的班级', img: require('@/assets/img/my/myClass.png'), url: 'myClassClass'},
         {id: 4, name: '我的学科', img: require('@/assets/img/my/subject.png'), url:'subject'},
         {id: 4, name: '面部识别图片', img: require('@/assets/img/my/faceImg.png'), url:'teacherFace'}
      ]
    }
  },
  methods: {
    tuijian () {
      this.$router.push('/myNew/colleague')
    },
    // 下半部功能跳转
    funcClick (e) {
      this.$router.push(e.url)
    }
  },
  async mounted() {
   
    if (this.identityData.isShowBenefitFoundation) {
      this.catalogData.push({id: 4, name: '公益基金', img: require('@/assets/img/my/fund.png'), url: '/welfareFound/index' })
    }
    if (!this.identityData.isShowBenefitFoundation && this.identityData.isShowJoinBenefit) {
      this.catalogData.push({id: 5, name: '一起做公益', img: require('@/assets/img/my/fund.png'), url: 'publicWelfare' })
    }
   
    
    console.log(this.identityData)
  }
}
</script>

<style lang="less" scoped>
.bigDivCss {
  width: 6.6rem;
  height: 1rem;
  margin-left: 0.3rem;
  font-size: 0.28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  img {
    width: 0.4rem;
    margin-right: 0.2rem;
  }
  span {
    margin-right: 0.1rem;
  }
}
.subject-p{
  position: absolute;
  top: 50%; right: 0.7rem; transform: translateY(-50%);
  color: #888;
    font-size: 0.24rem;
}
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}
</style>
